<#assign ctx=request.contextPath />
<!DOCTYPE html>
<!--
	作者：offline
	时间：2018-07-07
	描述：未缴账单
-->
<html lang="zh">
	<head>
        <base id="ctx" href="${ctx}">
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="${ctx}/css/admin_public.css" />
		<link href="${ctx}/layui/css/layui.css" rel="stylesheet">
		<link href="${ctx}/css/font.css" rel="stylesheet" />
		<style>
			.iconfont{
				color: white!important;
				padding-right: 7px;
				vertical-align: top;
			}
		</style>
	</head>
<body>
		<section style="width: 96%;background-color: white;margin: 0px auto;">
			<!--
              	作者：ADD
              	时间：2018-04-13
              	描述：添加小区
              -->
			<header>
				<h2 class="h2">未缴账单</h2>
			</header>
			<!--主体 -->
			<div id="subject" style="margin: 20px  30px">
	            <button id="addBill" class="button noborder"><i class="layui-icon btn-icon">&#xe654;</i>录入</button>
				<button class="button noborder" id="load"><i class="iconfont">&#xe60f;</i>导入</button>		
				<button class="button noborder" id="daochu"><i  class="iconfont">&#xe647;</i>导出</button>		
				<div style="float: right;">
					<input id="billId" type="text" placeholder="请输入住户/房号/小区/楼宇" class="search-keyword" />
					<button onclick="page()" class="noborder">
								<i class="layui-icon search">&#xe615;</i>
							</button>
					<button type="submit" class="noborder">
								<i class="layui-icon search">&#xe607;</i>
							</button>
				</div>
				<table  id="table" lay-filter="table"></table>
				<footer class="fenye p-20">
					
				</footer>
			</div>

		</section>
		<script src="${ctx}/layui/layui.js"></script>
		<script type="text/javascript" src="${ctx}/js/jquery-3.2.1.js"></script>
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">确认收款</a>        
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<script>
		
		/*批量导入*/
    /*#load:为按钮,点击后生成一个隐藏的input file标签*/
    $('#load').after('<input type="file" id="load_xls" name="file" style="display:none" onchange ="uploadFile()">');
    $('#load').click(function(){
        layer.confirm('导入前请确认单元格是否对应', {icon: 3, title:'提示',shade:'0',offset:['250px','700px']},
            function(index){
                document.getElementById("load_xls").click();
                layer.close(index);
        });

    });
    function uploadFile() {
        var uri=$("#load_xls").val();
        $.ajax({
            url: "",
            type: "POST",
            data: uri,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data);
            },
            error:function(data){
                console.log(data)
            }
        });
    }
    
    $("#daochu").click(function(){
    	
      	 layer.confirm('确定要导出列表中的数据吗?', {icon: 3, title:'提示',shade:'0',offset:['250px','700px']},function(index){
                        		 $.ajax({
                        			 url:'../Community/deleteCommunity.json',
                        			 type:'POST',
                        			 dataType:'json',                       	
                        			 data:{
                        				 communityId:data.communityId
                        			 },
                        			 success:function(data){
                        				 if(data===1){
                        					 layer.msg('导入成功，默认路径桌面',{icon:1});
                        					 obj.del();
                                   		     layer.close(index);
                        				 }else{
                        					 layer.msg('导入失败',{icon:2});
                        				 }
                        			 }
                        		 })
                        		 
                 });
    })
    
    
			$(".button").hover(function(){
				$(this).css("background-color","#68CF8F")
			},
			function(){
				$(this).css("background-color","rgb(15,180,120)")
			}
			)
			$("#addBill").click(function(){
				 layer.open({
				  type: 2, 
				  title:'添加账单',
				  area: ['600px', '70%'],		 
				  content: 'addbill.html'
				  })
			})
			//JavaScript代码区域
			layui.use('element', function() {
				var element = layui.element;
			});
			$(function(){
				page();
			})	
			function page(){
				layui.use(['layer', 'table'], function() {
					var table = layui.table;
					var layer = layui.layer;
					table.render({
						elem: '#table',
						loading:true,
						url: 'getAllNoBill.json',

						cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
							,
						cols: [
							[{
								field:'id',
								align: 'center',
								width: 120,
								title: '小区',
							},{
								field: 'communityName',
								align: 'center',							
								title: '房号/车位号/车牌号/住户',
							},							
							{
								field: 'communityAdmin',
								title: '费用名称',
								align: 'center',
							
							}, {
								field: 'communityAdminPhone',
								align: 'center',
								title: '开始/结束时间',
							
							}, {
								field: 'communityServicePhone',
								title: '住户',
								align: 'center',
					
							}, {
								field: 'communityAddress',
								title: '手机号',
								align: 'center',
								
							}, {
								field: 'communityAddress',
								title: '单价',
								align: 'center',
								
							},{
								field: 'communityAddress',
								title: '数量',
								align: 'center',
								
							},{
								title: '金额',
								width:160,
								toolbar:'#barDemo'								
							},{
								field: 'communityAddress',
								title: '备注',
								align: 'center',
								
							}]
						],			
						page: true
					})
					table.on('tool(table)', function(obj) {
						 var data = obj.data; //获得当前行数据
						 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
						 var tr = obj.tr; //获得当前行 tr 的DOM对象
                         if(layEvent==='del'){
                        	 layer.confirm('确定要删除吗?', {icon: 3, title:'提示',shade:'0'}, function(index){
                        		 $.ajax({
                        			 url:'../Community/deleteCommunity.json',
                        			 type:'POST',
                        			 dataType:'json',
                        			 data:{
                        				 communityId:data.communityId
                        			 },
                        			 success:function(data){
                        				 if(data===1){
                        					 layer.msg('删除成功',{icon:1});
                        					 obj.del();
                                   		     layer.close(index);
                        				 }else{
                        					 layer.msg('删除失败',{icon:2});
                        				 }
                        			 }
                        		 })
                        		 
                        		});
                        		  
                         }
					

					});
					
				})
			}
		
		</script>

	</body>

</html>